/** setycyas自制的表网页模拟控制台通用类,构造函数自动加入模拟控制台div到网页.
 * 考虑到兼容性,不使用jQuery.默认是隐藏的,需要用showConsole()函数显示控制台
 *
 * 各项私有属性(id与属性名相同,方便自己查找):
 * _z:模拟控制台层的z-index
 * _consoleDiv:原生的div对象,表示整个模拟控制台div
 * _consoleText:原生的textarea,控制台的主要输出输入文本框
 * _cmdButton:命令按钮,命令内容需要自己定义
 * _closeButton:关闭按钮,隐藏模拟控制台.打开模拟控制台只能用代码
 *
 * 各项公有属性函数:
 * SetycyasConsole(z):构造函数,指定控制台的z-index
 * setCmd(f):f是一个函数,定义按下_cmdButton时的函数
 * readConsole():返回控制台的文本
 * showMessage(msg):在控制台显示文本msg
 * showConsole():显示控制台
 * hideConsole():隐藏控制台
 *
 * 2019-03-15完成 
 * version = 0.01
 */
class SetycyasConsole {
  
  constructor(z) {
    //初始变量
    this._z = z;
    this._consoleDiv = document.createElement('div');
    this._consoleText = document.createElement('textarea');
    this._cmdButton = document.createElement('button');
    this._closeButton = document.createElement('button');

    //加入组件
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(this._consoleDiv);
    this._consoleDiv.appendChild(this._consoleText);
    this._consoleDiv.appendChild(document.createElement('br'));
    this._consoleDiv.appendChild(this._cmdButton);
    this._consoleDiv.appendChild(this._closeButton);
    //设定各种属性
    // _consoleDiv
    this._consoleDiv.id = "_consoleDiv";
    this._consoleDiv.style['z-index'] = this._z+'';
    this._consoleDiv.style.display = 'none';
    this._consoleDiv.style.position = 'fixed';
    this._consoleDiv.style.top = '0px';
    this._consoleDiv.style.left = '0px';
    this._consoleDiv.style.margin = '20px';
    this._consoleDiv.style.padding = '20px';
    this._consoleDiv.style['width'] = '800px';
    this._consoleDiv.style['height'] = '300px';
    this._consoleDiv.style['background-color']= '#e8e8e8';
    // _consoleText
    this._consoleText.id = "_consoleText";
    this._consoleText.style['width'] = '700px';
    this._consoleText.style['height'] = '200px';
    this._consoleText.value = "This is the console!";
    // _cmdButton
    this._cmdButton.id = "_cmdButton";
    this._cmdButton.textContent = 'Cmd';
    // _closeButton
    this._closeButton.id = "_closeButton";
    this._closeButton.textContent = 'Close';
    //设定事件
    this._cmdButton.onclick = ()=>{
      console.log('Default _cmdButton onclick!Now console message is:');
      console.log(this.readConsole());
    }
    this._closeButton.onclick = ()=>{
      this._consoleDiv.style.display = 'none';
    }
  }
  
  /* 设置命令 */
  setCmd(f){
    this._cmdButton.onclick = f;
  }
  
  /* 读取字符串 */
  readConsole(){
    return this._consoleText.value;
  }
  
  /* 显示文本msg */
 showMessage(msg){
   this._consoleText.value = msg;
 }
 
 /* 显示控制台 */
 showConsole(){
   this._consoleDiv.style.display = 'block';
 }
 
 /* 隐藏控制台 */
 hideConsole(){
   this._consoleDiv.style.display = 'none';
 }
 
}

/* 下面两句是测试用的,使用时不需要 */
var sc = new SetycyasConsole(99999);
sc.showConsole();